<style>
    #level-update {
        padding: 20px 25px 25px 0;
    }

    .layui-form-label {
        width: 140px;
    }

    .layui-input-block {
        margin-left: 170px;
    }

    .layui-layer-page .layui-layer-content {
        overflow: visible !important;
    }
</style>
<div class="layui-fluid" id="level-update">
    <form class="layui-form" action="" lay-filter="level-update-form">
        <div class="layui-form-item website-hide">
            <label class="layui-form-label website-form-item-require">id：</label>
            <div class="layui-input-block">
                <input type="text" name="declareId" data-th-value="${declare.declareId}">
                <input type="text" name="topicPlanId" data-th-value="${declare.topicPlanId}">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <label class="layui-form-label">课题名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" th:value="${declare.name}" readonly
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <label class="layui-form-label website-form-item-require">课题级别：</label>

                    <div class="layui-col-md3">
                        <select id="typeId" lay-filter="typeId">
                            <option value="">请选择</option>
                        </select>
                    </div>
                    <div class="layui-col-md3" style="margin-left: 5px;">
                        <select id="levelTypeCode" lay-verify="required" name="finalLevelTypeCode" lay-filter="annualType">
                            <option value="">请选择</option>
                        </select>
                    </div>

                </div>
            </div>
        </div>
        <div class="layui-form-item website-hide">
            <button class="layui-btn" lay-submit="" lay-filter="level-update-form-submit" id="submit"></button>
            <button type="reset" class="layui-btn" id="reset"></button>
        </div>
    </form>
</div>

<script data-th-inline="javascript">
    layui.use(['website', 'form', 'validate'], function () {
        var $ = layui.$,
            website = layui.website,
            layer = layui.layer,
            form = layui.form,
            declare = [[${declare}]],
            groups = [[${groups}]],
            validate = layui.validate;
        form.verify(validate);
        form.render();
        initFormValue();
        initSelect()

        function initFormValue() {
            $("#typeId").val(declare.parentFinalLevelTypeCode);
            $("#typeId").change();
            $("#levelTypeCode").val(declare.finalLevelTypeCode);
            form.val("level-update-form", {
                "declareId": declare.declareId,
                "name": declare.name
            });
        }

        /**
         * 初始化下拉框
         */
        function initSelect() {
            $("#entrustType").addClass("website-hide");
            $("#annualType").addClass("website-hide");
            $.each(groups, function (k, v) {
                $('#typeId').append(new Option(v.type.name, v.type.code));
            });
            layui.form.render("select");
            //年度课题与委托课题显示的不一样哦。
            form.on('select(topicClassifyCode)', function (data) {
                var tmp = data.value;
                //年度
                if (tmp === 'annual') {
                    $("#annualType").removeClass("website-hide");
                    $("#entrustType").addClass("website-hide");
                } else if (tmp === 'entrust') {
                    $("#entrustType").removeClass("website-hide");
                    $("#annualType").addClass("website-hide");
                }
            })
            form.on('select(typeId)', function (data) {
                var tmp = data.value;
                $("#levelTypeCode").empty();
                $.each(groups, function (k, v) {
                    if (v.type.code == tmp) {
                        if (v.course.length != 0) {
                            $('#levelTypeCode').append(new Option("请选择", ""));
                            $.each(v.course, function (key, value) {
                                $('#levelTypeCode').append(new Option(value.name, value.code));
                            });
                        } else {
                            $('#levelTypeCode').append(new Option('无内容', ''));
                        }
                    }
                });
                $("#topicLevelTypeVal").val("");
                layui.form.render("select");
            })
            form.on('select(entrustType)', function (data) {
                $("#topicLevelTypeVal").val(data.value);
            })

            form.on('select(annualType)', function (data) {
                $("#topicLevelTypeVal").val(data.value);
            })
        }


        form.on('submit(level-update-form-submit)', function (data) {
            website.post(ctx + 'biz/evaluation/defineLevel', data.field, function () {
                layer.closeAll();
                website.alert.success('定级成功');
                $('#website-evaluation').find('#query').click();
            });
            return false;
        });
    });
</script>